<!--代理商-->
<template>
  <page-header-wrapper
    :title="false">
    <a-card :loading="loading" :bordered="false">
      <div class="table_header" style="display: flex;justify-content: space-between;padding-right: 20px ">
        <div>
          <a-button type="primary" icon="plus" @click="addUser">
            新建
          </a-button>
          <a-button icon="delete" :disabled="isOpenExport" style="margin-left: 10px" @click="deleteRouter">
            删除路由
          </a-button>
          <a-button icon="disconnect" :disabled="isOpenExport" style="margin-left: 10px" @click="closeMenu">
            暂停路由
          </a-button>
          <a-button icon="link" :disabled="isOpenExport" style="margin-left: 10px" @click="openMenu">
            激活路由
          </a-button>
        </div>
        <div class="headInput">
          <a-select
            show-search
            :value="value"
            placeholder="请输入搜索的路由名称"
            style="width: 200px;border-radius: 0px "
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            :selectedRowKeys="selectedRowKeys"
            @onChange="handleOnchage"
            @search="handleSearch"
            @change="handleChange"
          >
            <a-select-option style="border-radius: 0px " v-for="d in columns" :key="d.title">
              {{ d.title }}
            </a-select-option>
          </a-select>
          <a-button icon="search" type="primary">
            查找
          </a-button>

          <a-popover trigger="click" placement="left">
            <template slot="title">
              自定义显示列表
            </template>
            <template slot="content">
              <a-checkbox-group class="checkGroup" :options="checkColums" v-model="hasCheckColums" @change="onChage">
              </a-checkbox-group>
            </template>
            <a-button class="popuerButton" icon="ordered-list" type="primary">
              列表
            </a-button>
          </a-popover>
        </div>
      </div>
      <a-table
        id="components-table-demo-size"
        style="margin-top: 10px"
        :columns="showColums"
        :pagination="pagination"
        :data-source="tabledata"
        rowKey="id"
        :row-selection="rowSelection">
        <template slot="name" slot-scope="text,record">
          <span >
            <span class="table_name" @click="openDialogName(record)">{{ text }}</span>
          </span>
        </template>
        <template slot="icon" slot-scope="text">
          <span >
            <a-icon v-if="text" :type="text"></a-icon>
            <span style="margin-left: 10px">{{ text }}</span>
          </span>
        </template>
        <template slot="status" slot-scope="text">
          <span >
            <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
          </span>
        </template>
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-if="props.value === '50'">全部</span>
        </template>
      </a-table>
    </a-card>

    <menu-panle
      ref="createModal"
      :visible="visible"
      :model="showType"
      :formData="formData"
      @cancel="handleCancel"
    />
  </page-header-wrapper>

</template>

<script>
import menuPanle from '@/views/systerm/menuComponents/menuPanle'
import { getMenuList } from '@/api/menu'
const columns = [
  { title: '路由名称', width: 180, dataIndex: 'name', key: '1', fixed: 'left', scopedSlots: { customRender: 'name' } },
  { title: '路由icon', dataIndex: 'icon', key: '2', scopedSlots: { customRender: 'icon' } },
  { title: '创建时间', dataIndex: 'updateTime', key: '4' },
  { title: '路由地址', dataIndex: 'path', key: '7' },
  { title: '路由文件', dataIndex: 'components', key: '8' },
  { title: '路由排序', dataIndex: 'sort', key: '9' },
  { title: '状态', dataIndex: 'status', key: '6', scopedSlots: { customRender: 'status' } },
  { title: '备注', dataIndex: 'describe', key: '5' }
]

const statusMap = {
  0: {
    status: 'success',
    text: '正常'
  },
  1: {
    status: 'default',
    text: '关闭'
  }
}

const serchList = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '手机',
    dataIndex: 'phone'
  },
  {
    title: '上级',
    dataIndex: 'p_name'
  }, {
    title: '套餐类型',
    dataIndex: 'type'
  }
]
export default {
  name: 'Agent',
  data () {
    return {
      loading: true,
      tabledata: [],
      columns,
      hasCheckColums: [], // 标示已经选中的
      checkColums: [], // 初始化的check
      selectedRowKeys: [],
      showColums: [],
      isOpenExport: true,
      serchList,
      value: '',
      pageSizeOptions: ['10', '50', '100'],
      current: 1,
      pagination: {
        defaultPageSize: 10,
        total: 10,
        'show-size-changer': true
      },
      showType: 0,
      visible: false,
      baseVisible: false, // 详情弹窗控件
      baseType: '', // 详情页面内容控件
      baseAgentId: 0, // 详情页面的id
      hasChildren: false, // 选中路由下级是否存在
      formData: {}
    }
  },
  components: {
    menuPanle
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  created () {
    this.checkGroupInit()
  },
  activated () {
    console.log('onshow')
    this.getMenuListInit()
  },
  computed: {
    rowSelection: function () {
      const t = this
      return {
        onChange: function (selectedRowKeys, selectedRows) {
          if (selectedRowKeys.length > 0) {
            t.isOpenExport = false
            t.selectedRowKeys = selectedRowKeys
          } else {
            t.isOpenExport = true
          }
        }
      }
    }
  },
  methods: {
    getMenuListInit () {
      getMenuList({
        page: 1,
        pageSize: 10,
        fold: true
      }).then(res => {
        console.log(res)
        this.loading = false
        this.tabledata = res.result
        // this.pagination.total = res.data.total
      })
    },
    // 路由删除按钮
    deleteRouter () {
      // const selectedRowKeys = this.selectedRowKeys
      const t = this
      this.$confirm({
        title: '你确定要删除吗？',
        content: '如果这个路由下存在子路由，删除也会将下方的子路由一并删除！',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          t.$message.success('只是展示')
        }
      })
    },
    closeMenu () {
      // const selectedRowKeys = this.selectedRowKeys
      const t = this
      this.$confirm({
        title: '你确定要暂停吗？？',
        content: '如果这个路由下存在子路由，暂停也会将下方的子路由一并暂停，所有用户都将不得访问！',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          t.$message.success('只是展示')
        }
      })
    },
    openMenu () {
      // const selectedRowKeys = this.selectedRowKeys
      const t = this
      this.$confirm({
        title: '你确定要激活吗？？',
        content: '如果这个路由下存在子路由，激活也会将下方的子路由一并激活！',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          // settingMenu({
          //   idList: selectedRowKeys,
          //   status: 0
          // }).then(res => {
          //   if (res.code === 200) {
          //     t.$message.success('激活成功')
          //     t.getMenuListInit()
          //     t.isOpenExport = false
          //     t.selectedRowKeys = []
          //   } else {
          //     t.$message.error('激活失败')
          //   }
          // })
          t.$message.success('只是展示')
        }
      })
    },
    checkGroupInit () {
      const columns = this.columns
      const checkColums = []
      const hasCheckColums = []
      const showColums = []
      columns.map(item => {
        const columsItem = {}
        const hasCheckColumsitem = String(item.dataIndex)
        hasCheckColums.push(hasCheckColumsitem)
        showColums.push(item)
        columsItem.label = item.title
        columsItem.value = String(item.dataIndex)
        if (item.title === '操作') {
          columsItem.disabled = true
        }
        checkColums.push(columsItem)
      })
      console.log(checkColums)
      this.hasCheckColums = hasCheckColums
      this.checkColums = checkColums
      this.showColums = showColums
    },
    onChage (e) {
      if (e.length !== 0) {
        const columnsArray = []
        for (var i in e) {
          columns.map(item => {
            if (e[i] === item.dataIndex) {
              columnsArray.push(item)
            }
          })
        }
        this.showColums = columnsArray
      }
    },
    handleSearch (value) {
      console.log(value)
    },
    handleChange (value) {
      console.log('123456' + value)
    },
    handleOnchage (e) {
      console.log(e)
    },
    /* 表格点击name 函数 */
    openDialogName (e) {
      this.visible = true
      this.showType = 1
      this.$refs.createModal.setData(JSON.stringify(e))
    },
    /* 新增按钮函数 */
    addUser () {
      this.visible = true
      this.showType = 0
      this.userData = {}
    },
    /* 新增，修改页面回调关闭函数 */
    handleCancel () {
      this.visible = false
      this.showType = 0
      this.getMenuListInit()
    },
    /* 操作 -》 详情 */
    gotoAgentDetails (e) {
      console.log(e)
      // this.visible = true
      // this.baseType = 0
      // this.formData = e
    },
    /* 详情页面关闭回调 */
    handleBaseCancel () {
      this.baseVisible = false
      this.baseType = ''
    }
  }
}
</script>

<style lang='less' scoped>
.table_header{
  button{
    border-radius: 5px;
  }
  .popuerButton{
    margin-left: 20px;
  }
}
.checkGroup{
  width: 120px;
  margin: 10px;
  line-height: 25px
}
.table_name{
  cursor:pointer
}
</style>
